<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/8 22:28
    @Version 1.0
    @Description 文件说明
  -->
    <meta charset="UTF-8">
    <title>table表格</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<!--自动渲染的方式，需要将json数据放到自己的服务器上，不然请求数据异常-->
<!--注意url属性的书写格式url:'/demo/table/user/'-->
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true}" >
    <thead>
    <tr>
        <!--可以获取一列的值-->
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'username', width:80}">用户名</th>
        <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
        <th lay-data="{field:'city'}">城市</th>
        <th lay-data="{field:'sign'}">签名</th>
        <th lay-data="{field:'experience', sort: true}">积分</th>
        <th lay-data="{field:'score', sort: true}">评分</th>
        <th lay-data="{field:'classify'}">职业</th>
        <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
    </thead>
</table>
<!--方法渲染的方式推荐-->
<table id="demo" class="layui-table"></table>
<script src="/layui/layui.js"></script>
<script>
    layui.use([ 'jquery', 'table'], function () {
        var table = layui.table;

    //执行方法渲染，table.render()方法返回一个对象，可用于对当前表格进行“重载”等操作
        var tableIns =table.render({
                            id:'myFormID',//设定容器唯一 id
                            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
                            url:'/demo/table/user/',
                            height: 315, //容器高度
                            page:true,//配置分页
                            toolbar:true,//开启表头工具栏，默认开启右侧工具栏
                            done:function(res, curr, count){ //渲染完后的回调
                                //如果是异步请求数据方式，res即为你接口返回的信息。
                                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                                console.log(res);//返回的数据
                                console.log(curr);//当前页
                                console.log(count);//得到数据总量
                            },
                            totalRow:true,  //开启行统计
                            limit:30, //每页显示的条数
                            limits:[30,60,90],//每页条数的选择项
                            loading:true,//是否显示加载条
                            title:'用户表',//定义 table 的大标题（在文件导出等地方会用到
                            parseData: function(res){ //res 即为原始返回的数据(数据适配)
                                return {
                                    "code": res.status, //解析接口状态
                                    "msg": res.message, //解析提示文本
                                    "count": res.total, //解析数据长度
                                    "data": res.data.item //解析数据列表
                                };
                            },
                            where:{name:'张三'}, //接口的其他参数（设置默认的条件）
                            cols: [
                                [
                                    {type:'checkbox',width:80},
                                    {field:'id', title:'ID',width:80, sort: true}
                                ]
                            ] //设置表头
        });
    });
</script>
</body>
</html>